<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/loginstyle.css">
    <title>Login | wyz</title>

    <!-- 引入vue框架 -->
    <script src="../lib/js/vue.js"></script>
    <!-- 引入axios库 -->
    <script src="../lib/js/axios.js"></script>
    <!-- 引入config -->
    <script src="../lib/js/config.js"></script>

    
</head>
<body>
    <div class="login-card">
        <h2>Login</h2>
        <h3>Enter your credentials</h3>
        <form class="login-form" id="login-form">
            <input type="text" placeholder="用户名" v-model="user.userAccount" required>
            <input type="password" placeholder="密码" v-model="user.password" required>
            <!-- Captcha -->
            <div class="captcha-container">
                <input type="text" id="captcha" name="captcha" placeholder="验证码" required v-model="user.checkCode">
                <img :src="captcha" @click="refreshCaptcha" alt="校验码"  style=" height: 25px; cursor: pointer;" >
            </div>





            <div class="link-container">
                <a href="./forgetPassword.html">忘记密码</a>
                <a href="./register.html">注册</a>
            </div>
            <button type="button" @click="onLogin">LOGIN</button>
        </form>
    </div>

    <script>
        //登录实例
        var login = new Vue({
            el: '#login-form',
            data: {
                user:{
                    userAccount: '',
                    password: '',
                    uuid: null,
                    checkCode: ''
                },

                captcha: null,
            },
            mounted() {
                    this.refreshCaptcha();
                },
            methods: {
                refreshCaptcha() {
                    axios.get("/user/getCaptcha").then(response=>{
                        this.user.uuid = response.data['uuid'];
                        console.log(this.user.uuid);
                        this.captcha = response.data['captcha'];
                        console.log(this.captcha);
                    })
                },
                onLogin() {
                    var that = this;
                    axios.post('/user/login', this.user).then(response => {
                        console.log(response.data);
                        if (response.data.data = true) { // 假设成功状态码为200
                            alert('登录成功');
                            localStorage.setItem('userAccount',that.user.userAccount);
                            window.location.href = '../html/index.html';
                        } else {
                            alert('登录失败，请检查用户名、密码和验证码');
                        }
                    }).catch(error => {
                        console.error('登录请求失败:', error);
                        alert('登录请求失败，请重试');
                    });
                }
            }
        });
            
        

       
    </script>
</body>
</html>